<template>
  <div>
    <div class="mgl10 mgr10">
      <el-calendar v-model="DateDayFormat" ref="calendar" class="r10">
        <template #header="{ date }">
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="small" @click="selectDate('prev-month')">
              上个月
            </el-button>
            <el-button size="small" @click="selectDate('today')"
              >今天</el-button
            >
            <el-button size="small" @click="selectDate('next-month')">
              下个月
            </el-button>
          </el-button-group>
        </template>
        <template v-slot:dateCell="{ data }">
          <div class="h100" @click.stop="handleClickDate(data.day)">
            <div class="activeBar" v-if="data.day == NowDateDay"></div>
            <div class="flex acenter jcenter h100">
              <div class="tcenter width100" style="padding: 0 10px">
                <div>{{ filterDate(data.day) }}</div>
                <div
                  class="cbtn"
                  v-for="(item, index) in filterDateItem(data.day)"
                  :key="index"
                >
                  {{ item.Name }}
                </div>
              </div>
            </div>
          </div>

          <!-- <div @click.stop="handleClickDate(data.day)" class="dateBox">
            <div>{{ filterDate(data.day) }}</div>
            <div v-if="filterDateItem(data.day) > 0" class="tcenter">
              <span class="courseCount"> {{ filterDateItem(data.day) }}</span>
              <span class="courseCountText">节课</span>
            </div>
          </div> -->
        </template>
      </el-calendar>
    </div>

    <!-- 课程列表 -->
    <MyDialog v-model:show="showCourseList" :title="title" :showFooter="false">
      <MyTable
        :columns="columns2"
        :toolbar="false"
        :tableList="courseList"
      ></MyTable>
      <div style="font-size: 18px; color: #303133" class="mgt20 mgb10">
        考试信息 <span>{{ DateDay }}</span>
      </div>
      <MyTable
        :columns="exameColumns"
        :toolbar="false"
        :tableList="exameList"
      ></MyTable>
    </MyDialog>
  </div>
</template>

<script setup name="MySchedule">
import {
  GetAlreadyScheduleDate,
  GetScheduleDateDetail,
} from "@/api/schedule/class.js";
import { getCurrentInstance, onMounted } from "vue";
import usePermissionStore from "@/store/modules/user.js";

const props = defineProps({
  myCourse: {
    default: false,
  },
});
const { proxy } = getCurrentInstance();
const calendar = ref();
const NowDateDay = proxy.$moment(new Date()).format("YYYY-MM-DD");

const userInfo = usePermissionStore().userInfo;

let dateList = [];
const tableList = ref([]);
const courseList = ref([]);
const look = ref(true);
const title = ref("");
const formData = ref({});
const showUserList = ref(false);
const formRef = ref({});
const DateDay = ref({});
const DateDayFormat = ref();
const selectUser = ref({});
const showUserData = ref({});
const exameList = ref([]);
const showCourseList = ref(false);
const columns = ref([
  { label: "单选框", width: 80, prop: "ID" },
  { label: "序号" },
  { label: "登录账户", prop: "Account" },
  { label: "用户名称", prop: "Name" },
  { label: "电话号码", prop: "Phone" },
  { label: "创建时间", prop: "CreateTime" },
  { label: "创建人", prop: "CreateUser", user: true },
]);
const columns2 = ref([
  { label: "启止时间", prop: "StartAndEnd" },
  { label: "班级", prop: "Name_Class" },
  { label: "场地", prop: "Name_Place" },
  { label: "课程", prop: "Name_Course" },
  { label: "教师", prop: "Name_Teacher" },
  { label: "设备", prop: "Name_Device" },
  { label: "课时", prop: "CourseHour" },
]);
const exameColumns = ref([
  // { label: "序号" },
  // { label: "日期", prop: "DateDay" },
  { label: "启止时间", prop: "StartAndEnd" },
  { label: "班级", prop: "Name_Class", color: "" },
  { label: "场地", prop: "Name_Place" },

  { label: "关联课程", prop: "Name_Course", color: "" },
  { label: "监考老师", prop: "Name_Teacher", color: "" },
  { label: "使用设备", prop: "Name_Device", color: "" },
  { label: "关联证书", prop: "Name_Certificate", color: "" },
]);
proxy.$formatKey(exameColumns.value);
proxy.$formatKey(columns.value);
proxy.$formatKey(columns2.value);

const TypesUser = {
  1: "学员",
  4: "教师",
};

onMounted(() => {
  look.value = false;
  //   getList();
});

const selectDate = (val) => {
  look.value = false;
  getList();
  calendar.value.selectDate(val);
};

function filterDate(date) {
  if (dateList.length != 42) dateList.push(date);
  if (dateList.length == 42) {
    getList();
    dateList = [];
  }
  return Number(date?.slice(8));
}

async function getList() {
  if (look.value || dateList?.length != 42) return;
  let type = "";
  let ID = "";
  if (userInfo?.Type == 3) return;

  if (userInfo?.Type == 1) {
    if (!userInfo?.ID_Class) {
      proxy.$modal.msgError("请先绑定班级");
      return;
    }
    type = 1;
    ID = userInfo.ID_Class;
  }
  if (userInfo?.Type == 2) {
    type = 4;
    ID = userInfo.ID;
  }
  try {
    let query = {
      ID,
      Type: type,
      StartTime: dateList?.[0],
      EndTime: dateList?.[dateList.length - 1],
    };

    let res = await GetAlreadyScheduleDate(query);

    res.data?.forEach((item) => {
      item.Date = item.Date?.slice(0, 10);
    });
    tableList.value = res.data;
    look.value = true;
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  // userInfo
  getList();
});

function filterDateItem(date) {
  let obj = tableList.value?.find((item) => item.Date == date) || {};
  obj.AlreadyCount =
    obj.AlreadyCount?.length > 2
      ? obj.AlreadyCount.slice(0, 2)
      : obj.AlreadyCount;
  return obj.AlreadyCount;
}

async function handleClickDate(date) {
  let type = "";
  let ID = "";
  if (userInfo?.Type == 3) return;

  if (userInfo?.Type == 1) {
    if (!userInfo?.ID_Class) {
      proxy.$modal.msgError("请先绑定班级");
      return;
    }
    type = 1;
    ID = userInfo.ID_Class;
  }
  if (userInfo?.Type == 2) {
    type = 4;
    ID = userInfo.ID;
  }
  DateDay.value = date;
  DateDayFormat.value = new Date(date);
  try {
    let query = {
      ID,
      Type: type,
      Date: date,
    };
    let res = await GetScheduleDateDetail(query);
    res.data?.forEach((item) => {
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + " -- " + item.EndTime?.slice(11, 16);
    });
    title.value = "上课信息 " + DateDay.value;
    exameList.value = res.data?.filter((item) => item.Type == 2);
    courseList.value = res.data?.filter((item) => item.Type == 1);
    showCourseList.value = true;
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.cbtn {
  color: white;
  font-size: 12px;
  border-radius: 3px;
  margin-top: 4px;
  &:not(.more) {
    &:nth-child(2) {
      background-color: #356df2;
    }
    &:nth-child(3) {
      background-color: #ff69b4;
    }
  }
  &.more {
    border: 1px solid #ddd;
    color: #000000;
  }
}
:deep(.el-calendar) {
  .el-calendar__body {
    .el-calendar-table {
      border-spacing: 10px;
      background-color: #f4f8ff;
      td {
        border: none !important;
        background-color: white;
      }
    }
  }
}
.activeBar {
  background-color: #356df2;
  height: 5px;
  border-radius: 2.5px;
}
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;

  .dateBox {
    padding: 10px;
    height: 100%;
  }
}
.courseCount {
  font-weight: bool;
  display: inline-block;
  font-size: 20px;
  border-radius: 50%;
  border: 1px solid rgb(204, 202, 202);
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.courseCountText {
  color: rgb(187, 185, 185);
  line-height: 30px;
  margin-left: 6px;
}
</style>
